<template>
  <Scroll class="suggest"
   :data="songList"
   :pullup="pullup"
   @scrollToEnd="searchMore"
   :beforeScroll="beforeScroll"
   @beforeScroll="listScroll">
     <ul class="suggest-list">
       <li class="suggest-item" @click="selectItem(item)" v-for="(item,index) of songList" :key="index">
           <div class="icon">
            <span :class="getIconCls(item)"></span>
          </div>
        <div class="name">
          <p class="text">{{item.name}}</p>
        </div>
       </li>
       <Loading v-show="hasMore" :title="loadingText" />
     </ul>
     <div class="no-result-wrapper"  v-show="songList.length==0">
       <noResult title="暂无歌曲...不妨换个搜索关键词吧" />
     </div>
  </Scroll>
</template>

<script type="text/ecmascript-6">
import Scroll from 'base/scroll/scroll'
import {singerDetail} from 'api/singer'
import Loading from 'base/loading/loading'
import noResult from 'base/no-result/no-result'
import {mapMutations,mapActions} from 'vuex'
let POLLUP_STATUS = false
export default {
  components: {
    Scroll,
    Loading,
    noResult
  },
  props: {
    query: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      songList: [],
      pullup: true,
      hasMore: true,
      searchValue: '',
      offsetNum: 0,
      beforeScroll: true,
      loadingText:''
    }
  },
  watch: {
    query (newValue) {
      this.search(newValue)
    }
  },
  methods: {
    listScroll() {
      this.$emit('listScroll')
    },
    getIconCls(item) {
      if (!item.duration) {
        return 'icon-mine'
      } else {
        return 'icon-music'
      }
    },
    ...mapMutations({
      setSinger: 'SET_SINGER',
    }),
    ...mapActions([
      'insertSong'
    ]),
    selectItem(item) {
      console.log(item)
      if(!item.duration) {
        this.$router.push({
          path: `/singer/${item.id}`
        })
        // 歌手
        this.setSinger(item)
      }else{
        // 歌曲
        this.insertSong(item)
      }
      this.$emit('select')
    },
    searchMore() {
      if(!this.hasMore || POLLUP_STATUS) {
        return
      }
      POLLUP_STATUS = true
      this.offsetNum++
      singerDetail(this.searchValue,this.offsetNum).then(res => {
        if(res.data.body.result.songs){
          this.loadingText = '已经到底了'
          this.hasMore = false
        }else{
           this.songList = [...this.songList,...res.data.body.result.songs]
        }
        setTimeout(function() {
           POLLUP_STATUS = false
        },1000)
      })
    },
    search(newValue) {
      if(!newValue) {
        return
      }
      this.searchValue = newValue
      singerDetail(newValue,0,this.offsetNum).then(res => {
        this.songList = res.data.body.result.songs
        singerDetail(newValue,100).then(res => {
          let singer = res.data.body.result.artists[0]
          this.songList.unshift(singer)
        })
      })
    }
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"

  .suggest
    height: 100%
    overflow: hidden
    .suggest-list
      padding: 0 30px
      .suggest-item
        display: flex
        align-items: center
        padding-bottom: 20px
      .icon
        flex: 0 0 30px
        width: 30px
        [class^="icon-"]
          font-size: 14px
          color: $color-text-d
      .name
        flex: 1
        font-size: $font-size-medium
        color: $color-text-d
        overflow: hidden
        .text
          no-wrap()
    .no-result-wrapper
      position: absolute
      width: 100%
      top: 50%
      transform: translateY(-50%)
</style>
